<template>
  <div>
    <zm-form :model="form" ref="form" label-width="150px">
    <zm-form-item
      label-width="120px"
      label="特殊限制规则"
      prop="type"
      :rules="RULES"
    >
      <zm-data-select
        v-model="form.type"
        :list="limitRules"
        class="w200"
        clearable
        placeholder="请选择规则"
        str
      >
      </zm-data-select>
      <!-- 指定时间组件 -->
      <holiday-time
        ref="holidayTime"
        v-if="isShowHolidayTime"
        v-model="form"
        class="mt15"
      ></holiday-time>
    </zm-form-item>

    <template v-if="isShowHolidayTime">
      <!-- 选择影院组件 -->
      <cinema-radio
        label-width="120px"
        v-model="form"
       @input="handleFinalAfter"
      ></cinema-radio>

      <!-- 类型为指定时间段指定影城补差展示 -->
      <div v-if="form.type === '3'">
        <!-- 选择制式 -->
        <zm-form-item
          label-width="120px"
          v-if="form.copyTypeList && form.copyTypeList.length > 0"
          label="选择制式"
          prop="copyType"
          :rules="RULES"
        >
          <zm-checkbox
            name-key="value"
            v-model="form.copyType"
            :list="form.copyTypeList"
            :option="{ isAllShow: true }"
          />
        </zm-form-item>
        <!-- 选择影厅 -->
        <zm-form-item
          label-width="120px"
          v-if="form.hallTypeList && form.hallTypeList.length > 0"
          label="选择影厅"
          prop="hallType"
          :rules="RULES"
        >
          <zm-checkbox
            name-key="value"
            v-model="form.hallType"
            :list="form.hallTypeList"
            :option="{ isAllShow: true }"
          />
        </zm-form-item>
        <!-- 补差金额 start -->
        <zm-form-item label="补差金额" label-width="120px">
          <set-price-table-items
            :keys="setPriceKeys"
            :more="true"
            :data="form"
            :all-x-axis="form.hallTypeList"
            :all-y-axis="form.copyTypeList"
            :x-axis="form.hallType"
            :y-axis="form.copyType"
            v-if="isShowSetPriceTable"
          ></set-price-table-items>
          <zm-button icon="el-icon-plus" @click="handleSetAll">
            批量设置
          </zm-button>
        </zm-form-item>
      </div>
    </template>
  </zm-form>
    <!-- 批量设置固定补差价格 -->
    <set-all
      v-model="isShowSetAll"
      v-if="isShowSetAll"
      @handle-after="setAllCallBack"
    ></set-all>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import HolidayTime from '@/components/HolidayTime'
import CinemaRadio from '@/views/product/components/CinemaRadio'
import SetAll from '@/views/product/components/SetAll'
import SetPriceTableItems from '@/components/SetPriceTableItems'
import cloudApis from '@/api/src/cloud'
export default {
  name: 'OfflineRuleItem',
  components: {
    HolidayTime,
    CinemaRadio,
    SetAll,
    SetPriceTableItems
  },
  mixins: [tableMixin],
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      RULES: {
        required: true,
        message: '*为必填项，不能为空',
        trigger: 'change'
      },

      limitRules: [
        {
          name: '不限制',
          value: '1'
        },
        {
          name: '指定时间段指定影城不可用',
          value: '2'
        },
        {
          name: '指定时间段补差',
          value: '3'
        }
      ],
      isShowFilmSelect: false,
      isShowSetAll: false,
      isShowSetPriceTable: false,
      setPriceKeys: [
        { label: '', value: 'ruleData', placeholder: '请填写补差金额' }
      ]
    }
  },
  computed: {
    form: {
      get () {
        return this.item
      },
      set (val) {
      }
    },
    // 是否展示时间组件
    isShowHolidayTime () {
      return ['2', '3'].includes(this.form.type)
    },
    isShowPaiQi () {
      return ['4', '5'].includes(this.form.type)
    }
  },
  watch: {
    form: {
      handler (val) {
        this.$emit('change', this.form)
      },
      deep: true
      // immediate: true
    }
  },
  created () {
  },
  methods: {
    async handleFinalAfter (val) {
      this.$set(this.form, 'relationType', val.relationType)
      this.$set(this.form, 'relationId', val.relationId)
      this.isShowSetPriceTable = false
      this.$set(this.form, 'copyTypeList', [])
      this.$set(this.form, 'hallTypeList', [])
      // 处理执行制式、执行影厅的请求数据
      let params = {}
      const relationType = val.relationType || '-1'
      const relationId = val.relationId || '-1'
      if (relationType === '-1') {
        params = {
          type: '2',
          id: '-1'
        }
        // 选择全部影院，relationId 为 -1
        this.form.relationId = '-1'
      } else {
        if (relationId !== '-1' && relationId) {
          params = {
            type: relationType,
            id: relationId
          }
        } else {
          this.$set(this.form, 'copyTypeList', [])
          this.$set(this.form, 'hallTypeList', [])
          return
        }
      }
      await this.getCopyTypeList(params)
      await this.getHallTypeList(params)
      this.isShowSetPriceTable = true
    },
    // 获取制式数据
    async getCopyTypeList (params) {
      const _res = await cloudApis.getCopyTypeList(params)
      const _list = _res.map((i) => {
        return {
          id: i.id,
          value: i.name
        }
      })
      this.$set(this.form, 'copyTypeList', _list)
    },
    // 获取影厅数据
    async getHallTypeList (params, index) {
      const _res = await cloudApis.getHallTypeList(params)
      const _list = _res.map((i) => {
        return {
          id: i.id,
          value: i.name
        }
      })
      this.$set(this.form, 'hallTypeList', _list)
    },
    // 处理指定影片ID
    handleClearFilmCode (val) {
      let filmType = val
      let filmCode = ''
      if (val === '2') {
        filmCode = ''
        this.isShowFilmSelect = true
      } else {
        filmCode = '-1'
        this.isShowFilmSelect = false
      }
      this.$set(this.form, 'filmType', filmType)
      this.$set(this.form, 'filmCode', filmCode)
    },
    // 补差金额批量设置回调
    setAllCallBack (val) {
      const hallTypeSelected = this.form.hallType.split(',') // 执行影厅已选的
      const copyTypeSelected = this.form.copyType.split(',') // 执行制式已选的
      const res = this.form.ruleData.map((item, _index) => {
        if (copyTypeSelected.includes(item.copyType)) {
          item.price.forEach((i) => {
            if (hallTypeSelected.includes(i.hallType)) {
              i.money = val
            }
          })
        }
        return item
      })
      this.$set(this.form, 'ruleData', res)
    },
    handleSetAll () {
      this.isShowSetAll = true
    },
    validate () {
      return new Promise((resolve, reject) => {
        let promisrAll = [this.$refs.form.validate()]
        if (this.isShowHolidayTime) {
          promisrAll.push(this.$refs.holidayTime.validate())
        }
        Promise.all(promisrAll).then(() => {
          resolve()
        }).catch(() => {
          reject('*为必填项，请完善')
        })
      })
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
